<template>
    <div class="person">
        <h2>年龄：{{ age }}</h2>
        <h2>性别：{{ gender }}</h2>
        <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeCarPrice">修改汽车价格</button>
    </div>
</template>

<script setup name="Person">
    import {ref, reactive, toRefs, toRef} from 'vue'

    let age = ref(18)
    let car = reactive({brand: '奔驰', price: 100})

    let person = reactive({name: '张三', age: 18, gender: '男'})
    // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
    let {name, gender} = toRefs(person)
    //let {name, gender} = person

    function changeAge() {
        age.value += 1
        gender.value = '女'
        console.log(age.value)
    }

    function changeCarPrice() {
        car.price += 10
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }
</style>